<script setup lang="ts">
import { timeFormat_2 } from '@/hooks/util'
import { ref } from 'vue'

let visible = ref<boolean>(false)

const data = ref<any>({})
const show = (record: any) => {
  data.value = record
  visible.value = true
}

defineExpose({
  show,
})
</script>

<template>
  <a-drawer title="退款详情" placement="right" :closable="true" v-model:open="visible">
    <div class="main">
      <div class="imgBox">
        <img :src="data?.productImg" alt="暂无图片" />
        <!-- <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
      </div>
    </div>
    <div>
      <div class="box">
        <div style="width: 72px; text-align: center; font-weight: bolder">订单号：</div>
        <div style="font-size: 15px">{{ data?.orderNumber || '-' }}</div>
      </div>

      <div class="box">
        <div style="width: 74px; font-weight: bolder">商品标题：</div>
        <div style="font-size: 15px; flex: 1">
          {{ data?.productTitle || '-' }}
        </div>
      </div>

      <div class="box">
        <span style="font-weight: bolder">买家是否需要退货：</span>
        <span v-if="data?.returnProductStatus == '1'">退货退款</span>
        <span v-if="data?.returnProductStatus == '0'">仅退款</span>
      </div>

      <div class="box">
        <span style="width: 72px; text-align: center; font-weight: bolder">购买数量：</span>
        <span>{{ data?.amount || '-' }}</span>
      </div>

      <div class="box">
        <span style="width: 72px; text-align: center; font-weight: bolder">货物状态：</span>
        <span v-if="data?.productStatus == 1">未收到货</span>
        <span v-if="data?.productStatus == 2">已收到货</span>
        <span v-if="data?.productStatus == 3">已寄回</span>
        <span v-if="data?.productStatus == 4">未发货</span>
        <span v-if="data?.productStatus == 5">卖家确认收货</span>
        <span v-if="data?.productStatus == 6">已发货</span>
      </div>

      <div class="box">
        <span style="width: 90px; font-weight: bolder">退款订单号：</span>
        <span>{{ data?.refundOrderNumber || '-' }}</span>
      </div>

      <div class="box">
        <div style="width: 100px; font-weight: bolder">退款订单状态：</div>
        <div style="font-size: 15px; flex: 1">
          <span v-if="data?.refundStatus == 1">买家已经申请退款，等待卖家同意</span>
          <span v-if="data?.refundStatus == 2">卖家已经同意退款，等待买家退货</span>
          <span v-if="data?.refundStatus == 3">买家已经退货，等待卖家确认收货</span>
          <span v-if="data?.refundStatus == 4">退款关闭</span>
          <span v-if="data?.refundStatus == 5">退款成功</span>
          <span v-if="data?.refundStatus == 6">卖家拒绝退款</span>
          <span v-if="data?.refundStatus == 8">等待卖家确认退货地址</span>
          <span v-if="data?.refundStatus == 9">没有申请退款</span>
          <span v-if="data?.refundStatus == 11">退款结束</span>
        </div>
      </div>

      <div class="box">
        <div style="width: 130px; font-weight: bolder">买家申请退款描述：</div>
        <div style="flex: 1">{{ data?.buyerRefundDesc || '-' }}</div>
      </div>

      <div class="box">
        <div style="width: 130px; font-weight: bolder">买家申请退款原因：</div>
        <div style="flex: 1">{{ data?.refundReason || '-' }}</div>
      </div>

      <div class="box">
        <div style="width: 99px; font-weight: bolder">买家退款说明：</div>
        <div style="flex: 1">{{ data?.refundSubReason || '-' }}</div>
      </div>

      <div class="box">
        <span style="font-weight: 700">修改时间：</span>
        <span>{{ timeFormat_2(data?.updateTime) }}</span>
      </div>

      <div class="box">
        <span style="font-weight: 700">创建时间：</span>
        <span>{{ timeFormat_2(data?.createTime) }}</span>
      </div>
    </div>
  </a-drawer>
</template>

<style scoped lang="less">
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.imgBox {
  // width: 280px;
  height: 300px;
  border-radius: 5%;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }
}

.box {
  display: flex;
  margin-top: 15px;
}
</style>
